<template>
  <view class="station-map" :style="styleMap" :class="{ 'lznt-wrap': appType === 'lznt' }">
    <!-- <view class="map-wrap"></view> -->
    <!-- #ifdef H5 -->
    <view id="container" class="map-container"></view>
    <view class="map-center"></view>
    <!-- #endif -->
    <!-- #ifndef H5 -->
    <map
      ref="map1"
      id="map1"
      class="map-wrap"
      :latitude="data.mapCenter.lat"
      :longitude="data.mapCenter.lng"
      :markers="data.markers"
      :scale="12"
      @tap.stop="tapMap"
      @markertap.stop="tapMarker"
      @callouttap.stop="tapMarker"
      @regionchange="onRegionchange">
      <!-- #ifdef MP-WEIXIN -->
      <cover-view slot="callout">
        <block v-for="(item, index) in data.list" :key="index">
          <cover-view :marker-id="item.id" class="cover-box">
            <cover-view class="triangle"></cover-view>
            <cover-view class="cover-wrap">
              <cover-view class="row">
                <cover-view class="text1">直</cover-view>
                <cover-view class="text2">{{ item.countFreeConnectorDC || 0 }}&nbsp;</cover-view>
                <cover-view class="text3">/{{ item.countConnectorDC || 0 }}&nbsp;</cover-view>
              </cover-view>
              <cover-view class="row">
                <cover-view class="text1 text11">交</cover-view>
                <cover-view class="text2">{{ item.countFreeConnectorAC || 0 }}&nbsp;</cover-view>
                <cover-view class="text3">/{{ item.countConnectorAC || 0 }}&nbsp;</cover-view>
              </cover-view>
            </cover-view>
            <cover-view class="line"></cover-view>
          </cover-view>
        </block>
      </cover-view>
      <!-- #endif -->
      <view class="map-center"></view>
    </map>
    <!-- #endif -->

    <Tabber :select="1"></Tabber>

    <!-- 导航栏 -->
    <view :style="navigationBarStyle" class="input-wrap">
      <view class="input-box" :style="inputWidth" @tap="tapInput">
        请输入电站名称/目的地进行搜索
      </view>
      <view class="iconfont icon-collect1" @tap.stop="tapCollectList"></view>
    </view>

    <!-- 文字广告 -->
    <view v-if="data.adText.advContent" class="ad-text-box" :style="adTextStyle">
      <AdText :item="data.adText"></AdText>
    </view>

    <!-- 图标按钮 -->
    <view
      class="btn-wrap"
      :class="{
        'login-bottom': isLoginUser && data.isShow,
        'login-unitem-bottom': isLoginUser && !data.isShow,
        'unlogin-unitem-bottom': !isLoginUser && !data.isShow,
      }">
      <view class="icon-wrap" v-if="appType !== 'lznt'">
        <view class="iconfont icon-map-code" @tap.stop="tapCode"></view>
      </view>
      <view class="icon-wrap">
        <view class="iconfont icon-map-locate" @tap.stop="tapLocate"></view>
      </view>
      <view class="icon-wrap">
        <view class="iconfont icon-map-recommend" @tap.stop="tapRecommend"></view>
      </view>
    </view>

    <!-- 电站弹框 -->
    <view class="map-item-wrap" :class="{ 'login-bottom': isLoginUser }">
      <StationItem
        @locationOpenBtm="locationOpenBtm"
        v-show="data.isShow"
        :item="data.item"
        styleBox="map-item"
        @tap="tapDetails"></StationItem>
    </view>

    <view v-if="!isLoginUser" class="unlogin-wrap" @tap.stop="isLogin">
      <view>登录可查看精准的可用站点及定价！</view>
      <view class="text">
        去登录
        <view class="iconfont icon-arrow-right"></view>
      </view>
    </view>

    <!-- 弹框广告 -->
    <DialogAd ref="dialogAd" :list="data.adList"></DialogAd>
    <!--输入终端编码-->
    <DialogCode ref="dialogCodeRef"></DialogCode>
    <PopupBtm ref="locationOpenRef" @set-item="chooseType" />
  </view>
</template>

<script lang="ts" setup>
// #ifdef H5
import AMapLoader from '@amap/amap-jsapi-loader';
// #endif
import Tabber from '@/components/tabber/tabber.vue';
import StationItem from './stationMapItem.vue';
import DialogAd from './dialogAd.vue';
import DialogCode from './dialogCode.vue';
import AdText from '@/components/adText/adText.vue';
import PopupBtm from '@/components/popupBtm/popupBtm.vue';
import {
  getNavigationBarStyle1,
  getFullSHStyle,
  getSystemInfo,
  getToken,
  getUserId,
  getUrlCode,
  setUrlCode,
  getActivityId,
  setUserId,
  setToken,
  setAdPopup,
  getAdPopup,
  setToastInstance,
  setAMapInstance,
  getAMapInstance,
} from '@mixins/info';
import { getLocation, getLocationInfo, setSearch, getSearch, openLocation } from '@/utils/location';
import { scanActivity, handleCode } from '@/utils/util';
import { loginCheck } from '@/service/apis/login';
import { uniLogin } from '@/utils/api';
import { queryStationMaps, queryConnectorByQrCode } from '@/service/apis/station';
import { queryPopAdvertise, queryHomePageAdvertise } from '@/service/apis/advert';
// #ifdef MP-WEIXIN
import { useToast } from '@/components/wxToast';
setToastInstance(useToast());
// #endif

// 分享
onShareAppMessage(() => {
  return {
    title: '',
    path: '/pages/stationMap/stationMap',
  };
});

const appType = import.meta.env.VITE_VUE_APP_TYPE;

const navigationBarStyle = getNavigationBarStyle1('rgba(0,0,0,0)');
const styleMap = getFullSHStyle();
const resUrl = import.meta.env.VITE_VUE_APP_RES;

const info: any = getSystemInfo();

const inputWidth = `width: calc(100vw - ${info.menuWidth}px - 60rpx - 68rpx - 48rpx)`;

const adTextStyle = `top: calc(${info.navigationBarHeight}px + ${info.statusBarHeight}px + 24rpx)`;

// 弹框广告
const dialogAd = ref();
const aMapInstance = ref();
const mapContainer = ref();

const data = reactive({
  adList: [] as any,
  adText: {} as any,
  mapCenter: {} as any,
  list: [] as any, // 站点数据
  markers: [] as any, // 地图点
  isShow: false, // 是否显示电站信息
  item: {} as any, // 选中的电站
  timeNum: new Date().getTime(),
  centerLocation: '' as any,
});
// 查询地图数据入参
const chooseData = reactive({
  userLng: '',
  userLat: '',
  centreLng: '',
  centreLat: '',
});

const locationOpenRef = ref();
const locationOpenItem = ref({} as any);

// 获取电站数据
const getData = (flag?: boolean) => {
  queryStationMaps(chooseData)
    .then((res: any) => {
      data.timeNum = new Date().getTime();
      data.list = res || [];
      // #ifndef H5
      setMarkers();
      // #endif
      // #ifdef H5
      setMarkersH5();
      // #endif
      //默认展示最近的电站
      // if (flag && data.list.length > 0) {
      if (data.list.length > 0) {
        data.item = data.list[0];
        data.isShow = true;
      }
    })
    .catch(() => {
      data.timeNum = new Date().getTime();
    });
};
// 获取弹框广告数据
const getPopupAd = (city: string) => {
  const userId = getUserId();
  const obj: any = {
    cityName: city,
  };
  if (userId) {
    obj.userId = userId;
  }
  queryPopAdvertise(obj).then((res: any) => {
    data.adList = res || [];
    if (data.adList.length > 0) {
      nextTick(() => {
        dialogAd.value.open();
      });
    }
  });
};
// 获取文字广告数据
const getTextAd = (city: string) => {
  const userId = getUserId();
  const obj: any = {
    cityName: city,
  };
  if (userId) {
    obj.userId = userId;
  }
  queryHomePageAdvertise(obj).then((res: any) => {
    data.adText = res || {};
  });
};
// 打开地图弹窗
const locationOpenBtm = (item: any) => {
  locationOpenItem.value = item;
  locationOpenRef.value.open([
    {
      name: '高德地图',
      type: 'gd',
    },
    {
      name: '百度地图',
      type: 'bd',
    },
  ]);
};

// 底部弹窗选择地图
const chooseType = (type: string) => {
  openLocation({ ...locationOpenItem.value, type });
};

const activityScan = () => {
  // 扫码领券
  const activityId = getActivityId();
  console.log('aaa------------', activityId);
  if (activityId) {
    scanActivity(activityId);
  }
};

let isLoginUser = ref(true);
let userNo = ref('');
const flagLogin = async () => {
  console.log('tttt----------------type----', (getApp().globalData as any).qType);
  // 判断是否有token
  const userId = getUserId();
  if (userId) {
    const code = await uniLogin('weixin');
    loginCheck(
      {
        token: getToken(),
        userId: userId,
        jsCode: code,
      },
      true
    )
      .then((res: any) => {
        console.log('ccc-------', res);
        userNo.value = userId;
        if (res) {
          isLoginUser.value = true;
          // 入口扫码
          const qType = (getApp().globalData as any).qType;
          console.log('tttt------1111----------type----', (getApp().globalData as any).qType);
          if (qType === 'qrcode') {
            (getApp().globalData as any).qType = '';
            console.log('tttt------222----------type----', (getApp().globalData as any).qType);
            handleCode(true);
            return;
          }
          // 扫码充电
          const url = getUrlCode();
          if (url) {
            setUrlCode('');
            queryConnectorByQrCode({
              userId: userId,
              qrStr: url,
            }).then((res: any) => {
              uni.navigateTo({
                url: `/pages/charge/readyCharge?id=${res.id}`,
              });
            });
          }
          // 扫码领券
          activityScan();
        }
      })
      .catch(() => {
        userNo.value = '';
        setUserId('');
        setToken('');
        isLoginUser.value = false;
        // 入口扫码
        const qType = (getApp().globalData as any).qType;
        if (qType === 'qrcode') {
          isLogin(qType);
          return;
        }
        // 扫码领券
        activityScan();
      });
  } else {
    userNo.value = '';
    isLoginUser.value = false;
    // 入口扫码
    const qType = (getApp().globalData as any).qType;
    if (qType === 'qrcode') {
      isLogin(qType);
      return;
    }
    // 扫码领券
    activityScan();
  }
};
onMounted(() => {
  uni.hideTabBar();
});
onShow(async () => {
  const search = getSearch();
  // #ifdef H5
  await doLoadAMap();
  // #endif
  if (search) {
    setSearch();
    data.mapCenter = search;
    chooseData.centreLat = search.lat;
    chooseData.centreLng = search.lng;
    const info = getLocationInfo();
    chooseData.userLat = info.lat;
    chooseData.userLng = info.lng;
    // #ifndef H5
    mapObj.moveToLocation({
      longitude: data.mapCenter.lng,
      latitude: data.mapCenter.lat,
    });
    // #endif
    // #ifdef H5
    if (mapContainer.value) {
      if (data.centerLocation) {
        data.centerLocation.setPosition([data.mapCenter.lng, data.mapCenter.lat]);
      } else {
        data.centerLocation = new aMapInstance.value.Marker({
          position: [data.mapCenter.lng, data.mapCenter.lat],
          map: mapContainer.value,
          zIndex: 102,
          anchor: 'bottom-center',
          bubble: false, // 禁止冒泡
          content: '<div class="map-position"></div>',
        });
      }
      mapContainer.value.setCenter([data.mapCenter.lng, data.mapCenter.lat], true);
    }
    // #endif

    console.log('getLocation---111---', chooseData);
    getData();
  } else {
    flagLogin();
    getLocation()
      .then((res: any) => {
        data.mapCenter = res;
        chooseData.centreLat = res.lat;
        chooseData.centreLng = res.lng;
        chooseData.userLat = res.lat;
        chooseData.userLng = res.lng;
        // #ifndef H5
        mapObj.moveToLocation({
          longitude: data.mapCenter.lng,
          latitude: data.mapCenter.lat,
        });
        // #endif
        // #ifdef H5

        if (mapContainer.value && chooseData.userLng && chooseData.userLat) {
          if (data.centerLocation) {
            data.centerLocation.setPosition([chooseData.userLng, chooseData.userLat]);
          } else {
            data.centerLocation = new aMapInstance.value.Marker({
              position: [chooseData.userLng, chooseData.userLat],
              map: mapContainer.value,
              zIndex: 102,
              anchor: 'bottom-center',
              bubble: false, // 禁止冒泡
              content: '<div class="map-position"></div>',
            });
          }
          mapContainer.value.setCenter([chooseData.userLng, chooseData.userLat], true);
        }
        //#endif
        console.log('getLocation---111---', res);
        //获取数据绘制站点
        getData(true);
        if (getAdPopup()) {
          getPopupAd(res.cityName);
          setAdPopup(false);
        }
        getTextAd(res.cityName);
      })
      .catch(res => {
        data.mapCenter = res;
        chooseData.centreLat = res.lat;
        chooseData.centreLng = res.lng;
        chooseData.userLat = res.lat;
        chooseData.userLng = res.lng;
        // #ifndef H5
        mapObj.moveToLocation({
          longitude: data.mapCenter.lng,
          latitude: data.mapCenter.lat,
        });
        // #endif

        // #ifdef H5
        if (mapContainer.value && chooseData.userLng && chooseData.userLat) {
          if (data.centerLocation) {
            data.centerLocation.setPosition([chooseData.userLng, chooseData.userLat]);
          } else {
            data.centerLocation = new aMapInstance.value.Marker({
              position: [chooseData.userLng, chooseData.userLat],
              map: mapContainer.value,
              zIndex: 102,
              anchor: 'bottom-center',
              bubble: false, // 禁止冒泡
              content: '<div class="map-position"></div>',
            });
          }
          mapContainer.value.setCenter([chooseData.userLng, chooseData.userLat], true);
        }
        // #endif
        console.log('getLocation---222---', res);
        //获取数据绘制站点
        getData(true);
        if (getAdPopup()) {
          getPopupAd(res.cityName);
          setAdPopup(false);
        }
        getTextAd(res.cityName);
      });
  }
});

// 渲染站点
const setMarkers = () => {
  data.markers = [];
  const len = data.list.length;
  for (let i = len - 1; i >= 0; i--) {
    const item: any = data.list[i];
    // data.list.forEach((item: any) => {
    const obj = {
      // joinCluster: true,
      id: Number(item.id),
      latitude: item.stationLat,
      longitude: item.stationLng,
      iconPath: `${resUrl}station/map-icon.png`,
      width: 32,
      height: 36,
      customCallout: {
        display: 'ALWAYS',
        anchorX: 0,
        anchorY: 0,
      },
    };
    data.markers.push(obj);
    // });
  }
};

// 渲染站点H5
const setMarkersH5 = () => {
  data.markers?.forEach((item: any) => {
    if (item) {
      item.setMap(null);
      item = null;
    }
  });
  data.markers = [];
  const len = data.list.length;
  for (let i = len - 1; i >= 0; i--) {
    const item: any = data.list[i];
    // data.list.forEach((item: any) => {
    // const obj = {
    //   // joinCluster: true,
    //   id: Number(item.id),
    //   latitude: item.stationLat,
    //   longitude: item.stationLng,
    //   iconPath: `${resUrl}station/map-icon.png`,
    //   width: 32,
    //   height: 36,
    //   customCallout: {
    //     display: 'ALWAYS',
    //     anchorX: 0,
    //     anchorY: 0,
    //   },
    // };
    const detailMarker = new aMapInstance.value.Marker({
      position: [item.stationLng, item.stationLat],
      map: mapContainer.value,
      content: _renderMarker(item),
      anchor: 'bottom-center',
      zIndex: 100,
      topWhenClick: false,
      bubble: false, // 禁止冒泡
      // 给点添加额外数据
      extData: {
        id: item.id,
      },
    });
    detailMarker.off('click');
    detailMarker.on('click', (e: any) => {
      e.originEvent.preventDefault();
      // e.originEvent.stopPropagation();
      console.log('clickclickclick-detailMarker', e);
      tapMarker(e.target.getExtData().id);
    });
    data.markers.push(detailMarker);
    // });
  }
};
// 自定义普通点样式
const _renderMarker = (item: any) => {
  const markerBox = `
  <div class="customer-marker">
    <div class="cover-box">
      <div class="triangle"></div>
      <div class="cover-wrap">
        <div class="row">
          <div class="text1">直</div>
          <div class="text2">${item.countFreeConnectorDC || 0}&nbsp;</div>
          <div class="text3">/${item.countConnectorDC || 0}&nbsp;</div>
        </div>
        <div class="row">
          <div class="text1 text11">交</div>
          <div class="text2">${item.countFreeConnectorAC || 0}&nbsp;</div>
          <div class="text3">/${item.countConnectorAC || 0}&nbsp;</div>
        </div>
      </div>
      <div class="line"></div>
    </div>
    <div class="map-icon"></div>
  </div>
  `;
  return markerBox;
};

// 地图视野变化时
const onRegionchange = (e: any) => {
  // console.log(e);
  if (e.type === 'end') {
    const obj = {
      centerLocation: e.target.centerLocation, // 中心点
      scale: e.target.scale, // 缩放比例
      region: e.target.region, // 边缘坐标 northeast southwest
    };
    const t1 = new Date().getTime();
    if (t1 - data.timeNum >= 3 * 1000) {
      data.timeNum = new Date().getTime();
      chooseData.centreLat = obj.centerLocation.latitude;
      chooseData.centreLng = obj.centerLocation.longitude;
      getData();
    }
  }
};

// 点击地图站点
const tapMarker = (obj: any) => {
  // #ifndef H5
  data.item = data.list.find((item: any) => Number(item.id) == obj.markerId);
  // #endif

  // #ifdef H5
  data.item = data.list.find((item: any) => Number(item.id) == obj);
  // #endif
  console.log(obj, data.item);
  if (data.item) {
    data.isShow = true;
  }
};
const tapMap = () => {
  console.log('tapMap-----');
  data.item = {};
  data.isShow = false;
};

// 点击电站信息
const tapDetails = () => {
  uni.navigateTo({
    url: `/pages/stationDetails/stationDetails?id=${data.item.id}`,
  });
};

// 搜索
const tapInput = () => {
  uni.navigateTo({
    url: `/pagesMain/stationSearch/stationSearch`,
  });
};

// 收藏电站
const tapCollectList = () => {
  if (isLogin()) {
    uni.navigateTo({
      url: `/pagesMyCenter/myCollect/myCollect`,
    });
  }
};

// 推荐站点
const tapRecommend = () => {
  uni.navigateTo({
    url: `/pagesMain/stationRecommend/stationRecommend`,
  });
};

// 定位
const map1 = ref();
// #ifndef H5
const mapObj = uni.createMapContext('map1', map1.value);
// #endif
const tapLocate = () => {
  getLocation()
    .then((res: any) => {
      data.mapCenter = res;
      chooseData.centreLat = res.lat;
      chooseData.centreLng = res.lng;
      chooseData.userLat = res.lat;
      chooseData.userLng = res.lng;
      // #ifndef H5
      mapObj.moveToLocation({
        longitude: res.lng,
        latitude: res.lat,
      });
      // #endif
      // #ifdef H5
      if (mapContainer.value && chooseData.userLng && chooseData.userLat) {
        if (data.centerLocation) {
          data.centerLocation.setPosition([chooseData.userLng, chooseData.userLat]);
        } else {
          data.centerLocation = new aMapInstance.value.Marker({
            position: [chooseData.userLng, chooseData.userLat],
            map: mapContainer.value,
            zIndex: 102,
            anchor: 'bottom-center',
            bubble: false, // 禁止冒泡
            content: '<div class="map-position"></div>',
          });
        }
        mapContainer.value.setCenter([chooseData.userLng, chooseData.userLat], true);
      }
      // #endif
    })
    .catch(res => {
      data.mapCenter = res;
      chooseData.centreLat = res.lat;
      chooseData.centreLng = res.lng;
      chooseData.userLat = res.lat;
      chooseData.userLng = res.lng;
      // #ifndef H5
      mapObj.moveToLocation({
        longitude: res.lng,
        latitude: res.lat,
      });
      // #endif
      // #ifdef H5
      if (mapContainer.value && chooseData.userLng && chooseData.userLat) {
        if (data.centerLocation) {
          data.centerLocation.setPosition([chooseData.userLng, chooseData.userLat]);
        } else {
          data.centerLocation = new aMapInstance.value.Marker({
            position: [chooseData.userLng, chooseData.userLat],
            map: mapContainer.value,
            zIndex: 102,
            anchor: 'bottom-center',
            bubble: false, // 禁止冒泡
            content: '<div class="map-position"></div>',
          });
        }
        mapContainer.value.setCenter([chooseData.userLng, chooseData.userLat], true);
      }
      // #endif
    });
};

// 终端编码
const dialogCodeRef = ref();
const tapCode = () => {
  if (isLogin()) {
    dialogCodeRef.value?.open();
  }
};

const isLogin = (type?: string) => {
  const token = getToken();
  if (!token) {
    const url = type
      ? `/pages/login/login?page=/pages/stationMap/stationMap&type=${type}`
      : `/pages/login/login?page=/pages/stationMap/stationMap`;
    uni.navigateTo({
      url: url,
    });
    return false;
  }
  return true;
};

// 高德地图 安全配置
const amapSecurityConfig = () => {
  if (!(window as any)._AMapSecurityConfig) {
    (window as any)._AMapSecurityConfig = {
      securityJsCode: import.meta.env.VITE_VUE_APP_MAP_CODE,
    };
  }
};
// #ifdef H5
amapSecurityConfig();
// #endif
const doLoadAMap = () => {
  return new Promise(async (resolve, reject) => {
    if (getAMapInstance()) {
      aMapInstance.value = getAMapInstance();
      await initMap(aMapInstance.value);
      resolve(aMapInstance.value);
      return;
    }
    AMapLoader.load({
      key: import.meta.env.VITE_VUE_APP_MAP_KEY, // 首次load必填
      version: '2.0',
    })
      .then(async (AMap: any) => {
        setAMapInstance(AMap);
        aMapInstance.value = AMap;
        await initMap(AMap);
        // 监听地图点击事件
        // mapContainer.value.off('click');
        // mapContainer.value.on('click', (e: any) => {
        //   e.originEvent.stopImmediatePropagation();
        //   e.originEvent.preventDefault();
        //   e.originEvent.stopPropagation();
        // });

        resolve(AMap);
      })
      .catch((err: any) => {
        console.log('load-err', err);
        reject(new Error('地图加载失败'));
      });
  });
};

const initMap = (AMap: any) => {
  return new Promise((resolve, reject) => {
    nextTick(() => {
      mapContainer.value = new AMap.Map('container', {
        zoom: 12, // 初始化地图级别
        // 地图显示的缩放级别范围, 默认为 [2, 20] ，取值范围 [2 ~ 30]
        zooms: [3, 19],
        // 是否开启地图热点和标注的 hover 效果
        isHotspot: true,
        // 地图是否可旋转
        rotateEnable: false,
        // 是否使用缓动效果
        jogEnable: false,
        // 地图是否可通过双击鼠标放大地图, 默认为true。此属性可被setStatus/getStatus 方法控制
        doubleClickZoom: false,
        // webgl 参数
        WebGLParams: {
          // 表明canvas包含一个alpha通道. 如果设置为false, 浏览器将认为canvas背景总是不透明的, 这样可以加速绘制透明的内容和图片.
          alpha: true,
          // 绘制缓冲区包含一个深度至少为16位的缓冲区。
          depth: true,
          // 是否开启抗锯齿。
          antialias: false,
          // 表明排版引擎将假设绘制缓冲区包含预混合alpha通道
          premultipliedAlpha: true,
          //  表明在一个系统性能低的环境是否创建该上下文
          failIfMajorPerformanceCaveat: true,
          // 表明绘制缓冲区包含一个深度至少为8位的模版缓冲区
          stencil: false,
          // 解决高德地图截屏白屏问题
          preserveDrawingBuffer: true,
          //   GPU电池模式  "default":自动选择，默认值 "high-performance": 高性能模式。 "low-power": 节能模式。
          powerPreference: 'high-performance',
        },
      });
      mapContainer.value.on('click', () => {
        data.timeNum = new Date().getTime() - 2000;
        tapMap();
      });
      mapContainer.value.on('dragend', (e: any) => {
        console.log('dragend', e);
        onRegionchangeH5(e);
      });
      resolve(mapContainer.value);
    });
  });
};

// 地图视野变化时
const onRegionchangeH5 = (e: any) => {
  // console.log(e);
  const t1 = new Date().getTime();
  if (t1 - data.timeNum >= 3 * 1000) {
    data.timeNum = new Date().getTime();
    chooseData.centreLat = e.lnglat.getLat();
    chooseData.centreLng = e.lnglat.getLng();
    getData();
  }
};

onBeforeUnmount(() => {
  if (mapContainer.value) {
    mapContainer.value?.destroy();
  }
});
</script>

<style lang="scss" scoped>
.station-map {
  // #ifdef H5
  position: relative;
  // #endif
  // #ifdef H5
  .map-center {
    position: fixed;
    top: 0;
    left: 0;
    width: 24px;
    height: 36px;
    margin-top: calc((100vh - 77px) / 2 - 36px);

    margin-left: calc(50% - 12px);
    background-image: url($url + 'station/map-location.png');
    background-size: 100%;
    background-repeat: no-repeat;
  }
  // #endif
  .map-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: calc(100vh - 77px);

    //scss
    :deep(.amap-logo),
    :deep(.amap-copyright) {
      display: none !important;
    }

    :deep(.customer-marker) {
      display: flex;
      flex-direction: column;
      align-items: center;

      .cover-box {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        padding-bottom: 10px;
        transform: translate3d(0, 0, 0);

        .cover-wrap {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          width: auto;
          padding: 5px 10px;
          background-color: #fff;
          border: 1px solid #07c160;
          border-radius: 50px;
          box-sizing: border-box;
          z-index: 1;

          .row {
            display: flex;
            align-items: center;
            width: 100%;

            .text1 {
              margin-right: 5px;
              padding: 2px;
              font-size: 9px;
              color: #fff;
              background-color: #07c160;
              border-radius: 50%;

              &.text11 {
                background-color: #9859ff;
              }

              z-index: 2;
            }

            .text2 {
              font-size: 14px;
              color: #000;
              text-align: right;
              z-index: 2;
            }

            .text3 {
              font-size: 10px;
              // color: #000;
              color: rgba(0, 0, 0, 0.4);
              z-index: 2;
            }
          }
        }

        .triangle {
          position: absolute;
          bottom: 5.5px;
          width: 10px;
          height: 10px;
          background-color: #fff;
          border-style: solid;
          border-width: 1px;
          border-color: #07c160;
          transform: rotate(135deg);
        }

        .line {
          position: absolute;
          width: 12px;
          height: 3px;
          bottom: 9.5px;
          background-color: #fff;
          z-index: 1;
        }
      }

      .map-icon {
        width: 32px;
        height: 36px;
        background-image: url($url + 'station/map-icon.png');
        background-size: 100%;
        background-repeat: no-repeat;
      }
    }

    // :deep(.map-position) {
    //   width: 24px;
    //   height: 36px;
    //   background-image: url($url + 'station/map-location.png');
    //   background-size: 100%;
    //   background-repeat: no-repeat;
    // }
  }

  .map-wrap {
    width: 100vw;
    height: calc(100vh - 77px);

    .map-center {
      width: 24px;
      height: 36px;
      margin-top: calc((100vh - 77px) / 2 - 36px);

      margin-left: calc(50% - 12px);
      background-image: url($url + 'station/map-location.png');
      background-size: 100%;
      background-repeat: no-repeat;
    }

    .cover-box {
      display: flex;
      flex-direction: column;
      align-items: center;
      position: relative;
      padding-bottom: 10px;
      transform: translate3d(0, 0, 0);

      .cover-wrap {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        width: auto;
        padding: 5px 10px;
        background-color: #fff;
        border: 1px solid #07c160;
        border-radius: 50px;
        box-sizing: border-box;
        z-index: 1;

        .row {
          display: flex;
          align-items: center;
          width: 100%;

          .text1 {
            margin-right: 5px;
            padding: 2px;
            font-size: 9px;
            color: #fff;
            background-color: #07c160;
            border-radius: 50%;

            &.text11 {
              background-color: #9859ff;
            }

            z-index: 2;
          }

          .text2 {
            font-size: 14px;
            color: #000;
            text-align: right;
            z-index: 2;
          }

          .text3 {
            font-size: 10px;
            // color: #000;
            color: rgba(0, 0, 0, 0.4);
            z-index: 2;
          }
        }
      }

      .triangle {
        position: absolute;
        bottom: 5.5px;
        width: 10px;
        height: 10px;
        background-color: #fff;
        border-style: solid;
        border-width: 1px;
        border-color: #07c160;
        transform: rotate(135deg);
      }

      .line {
        position: absolute;
        width: 12px;
        height: 3px;
        bottom: 9.5px;
        background-color: #fff;
        z-index: 1;
      }
    }
  }

  .unlogin-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: absolute;
    height: 28px;
    bottom: 87px;
    left: 0;
    right: 0;
    padding: 0 16px;
    font-size: 16px;
    color: #fff;
    background-color: $uni-color-primary;

    .text {
      display: flex;
      align-items: center;

      .icon-arrow-right {
        font-size: 10px;
      }
    }
  }

  .btn-wrap {
    display: flex;
    position: absolute;
    bottom: 310px;
    right: 0;
    margin-right: 16px;
    flex-direction: column;

    &.login-unitem-bottom {
      bottom: 67px;
    }

    &.unlogin-unitem-bottom {
      bottom: 97px;
    }

    &.login-bottom {
      bottom: 275px;
    }
  }

  .icon-wrap {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    margin: 6px 0 6px auto;
    background-color: #fff;
    border-radius: 50%;

    .iconfont {
      font-size: 24px;
      color: #333;
    }
  }

  .icon-wrap:last-child {
    margin-bottom: 30px;
  }

  .map-item-wrap {
    position: absolute;
    width: calc(100vw - 32px);
    margin: 0 16px;
    bottom: 122px;

    &.login-bottom {
      bottom: 87px;
    }
  }
}

.input-wrap {
  position: absolute;
  top: 0;
  display: flex;
  align-items: center;
  margin-left: 12px;
  // #ifdef H5
  margin-left: 0px;
  // #endif

  .input-box {
    // #ifdef H5
    margin-left: 12px;
    // #endif
    display: flex;
    align-items: center;
    height: 32px;
    padding: 0 17px;
    background-color: #fff;
    border: 1px solid #f2f2f2;
    border-radius: 19px;
    font-size: 12px;
    color: #545454;
  }

  .icon-collect1 {
    margin-left: 5px;
    font-size: 20px;
    color: $uni-color-primary;
  }
}

.ad-text-box {
  position: absolute;
}

.lznt-wrap {
  .unlogin-wrap {
    bottom: 107px;
  }

  .btn-wrap {
    bottom: 333px;

    &.login-unitem-bottom {
      bottom: 77px;
    }

    &.unlogin-unitem-bottom {
      bottom: 117px;
    }

    &.login-bottom {
      bottom: 310px;
    }
  }

  .map-item-wrap {
    bottom: 145px;

    &.login-bottom {
      bottom: 107px;
    }
  }
}
</style>